<#import "../layout/common.html" as com> 
<@com.page title="Chat với Người lạ" pageId="pageChat" data={'css':'chat/chat', 'js':'chat/chat', 'ver':'a08'}>

<div class="wrap-space">
<div class="panel panel-default head-tab panel-fluid">
	<div class="panel-heading">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#chatTab" data-toggle="tab">Chat người lạ</a></li>
			<li><a href="#chatSettings" data-toggle="tab" id="tabTransLink" class="hide">Cài đặt</a></li>
		</ul>
	</div>
	<div class="tab-content">
		<div class="tab-pane active" id="chatTab">
			<div class="panel-body clearfix">Tán gẫu tẹt ga nha...<span class="badge pull-right hide">1301+ online</span></div>
			
			<div class="list-group chat-msgs has-scroll" id="chatMsgs">
			</div>
			<div id="chatMsgsTemplate" class="hide">
				<div class="help-connect">
					<div class="list-group-item list-group-item-info">Bấm nút <label class="label label-info">Start</label> để tìm bạn chat...</div>
				</div>
				<div class="help-paring">
					<div class="list-group-item list-group-item-info">Đang tìm bạn chat...</div>
				</div>
				<div class="help-start">
					<div class="list-group-item list-group-item-success">Bắt đầu chat...</div>
				</div>
				<div class="help-exit">
					<div class="list-group-item list-group-item-danger">Đã ngừng chat...</div>
				</div>
				<div class="msg">
					<div class="list-group-item "><strong>người lạ:</strong> <span></span></div>
				</div>
				<div class="my-msg">
					<div class="list-group-item mine"></div>
				</div>
			</div>
			
			<form role="form" id="chatForm" style="padding:10px; margin-bottom:0px; border-top:1px solid #dedede; background:#f5f5f5;">
				<div class="input-group chat-controls">
					<div class="input-group-btn">
						<button type="button" class="btn btn-info start-stop-btn" id="chatStartStop" tabindex="-1">Start</button>
					</div>
					<input type="text" class="form-control chat-msg-text" id="chat-msg" name="msg" placeholder="Gõ tin nhắn rồi Enter..." autocomplete="off">
					<div class="input-group-btn">
						<button type="submit" class="btn btn-success" tabindex="-1">Ok</button>
					</div>
				</div>
			</form>
		</div>
		<div class="tab-pane form-space" id="chatSettings">
			Cài đặt
		</div>
	</div>
</div>
</div>

</@com.page>